<template>
     <Category :disabled="showState===0"/>
     <el-card shadow="always" :body-style="{ padding: '20px' }" :style="{marginTop: '20px'}">
        <SpuList v-if="showState === 0" @setState="setState"/>
        <SpuForm v-if="showState === 1" :spuInfo="spuInfo" @setState="setState"/>
        <SkuForm v-if="showState === 2" :spuInfo="spuInfo" @setState="setState"/>
    </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";


export default defineComponent({
    name: "Spu",
});
</script>

<script setup lang="ts">
    import SpuForm from './components/SpuForm/index.vue'
    import SkuForm from './components/SkuForm/index.vue'
    import SpuList from './components/SpuList/index.vue'
    import {ref} from 'vue'
    import type { SpuInfoType } from '@/api/spu'
    import useAttrStore from '@/stores/attr'
    import {storeToRefs} from 'pinia'

    const attrStore = useAttrStore()
    const {category3Id} = storeToRefs(attrStore)
    //初始化一个spu
    const spuInfo = ref<SpuInfoType>({
        category3Id: category3Id.value,
        description: '',
        spuName: '',
        tmId: null,
        spuImageList: [],
        spuSaleAttrList: []
    })
    //声明一个数据,控制视图中的哪一个组件渲染
    const showState = ref(0)

    //自定义事件接收spuList参数
    const setState = (state: number, row?: SpuInfoType) => {
        showState.value = state
        if(row){//是修改
            spuInfo.value = row
        }else{//是新增
            spuInfo.value = {
                category3Id: category3Id.value,
                description: '',
                spuName: '',
                tmId: null,
                spuImageList: [],
                spuSaleAttrList: []
            }
        }
    }
</script>